<template>
  <div class="newHome-box">
    <van-nav-bar :title="routeTitle" left-arrow @click-left="$router.back()"/>
    <div class="product_main">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
          <!-- <gz-default-page v-if="!dataList || dataList.length <= 0" :textSize="'1.4rem'" :text="''"></gz-default-page> -->
          <div class="product_bg">
            <div v-for="item,index in dataList" :key="index" class="product_item" style="justify-content: space-between;" @click="toDetail(item)">
              <div class="product_item_left">
                <div class="product_price">
                  <div class="pro-price">{{item.quota}}<!-- <span> 万</span> --></div>
                  <p class="pro-title">最高可贷</p>
                  <div class="border-right"></div>
                </div>
                <div class="product_item_item">
                  <div class="title">{{item.prodName}}</div>
                  <div>{{item.displaySlogn}}</div>
                  <div>年利率（单利）低至 {{item.ratio}}</div>
                  <div>{{item.displayOverall}}</div>
                </div>
              </div>
              <div class="pro-arrow">
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        <!-- </van-list> -->
      <!-- </van-pull-refresh>     -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
import { gzDefaultPage } from '@/components/customize'
export default {
  components: { gzDefaultPage },
  name: "productList",
  data() {
    return {
      systemColor: '',
      routeTitle: '',
      dataList:[
        // {quota: '8000',prodName:'华夏财富宝',displaySlogn:'流程便捷、安全合规',ratio:'0.34%',displayOverall:'小微企业主、个体工商户、农户'},
      ],
      searchParam:{
        prodType: '',//产品分类
        prodName: '',//产品名称
        param1: '',//贷款主体
        param2: '',//担保方式
        param3: '',//贷款用途
        param4: '',//贷款额度
        param5: '',//贷款期限
        param6: '',//支用方式
        param7: '',//还款方式
      },
      // loading: false,
      // finished: false,
      refreshing: false,
      // page:0,
      // pageSize:10,
      // pageData:{
      //     total:0
      // }
    };
  },
  created: function() {
    this.routeTitle = this.$route.query.title;
    this.searchParam.prodType = this.routeTitle;
    this.querySugProd();
    // this.systemColor = localStorage.getItem("systemColor");
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    // if (window.localStorage) {
    //   var userMsgJson = localStorage.getItem("userMsg");
    //   if (userMsgJson) {
    //     try {
    //       this.userMsg = JSON.parse(userMsgJson);
    //     } catch (error) {}
    //   }
    // }
  },
  methods: {
    toDetail(item){
      var query = {
        prodId: item.prodId
      }
      this.$router.push({path:'/loanPage/productDetail',query: query});
    },
    // 产品数据
    querySugProd(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/querySugProd', this.searchParam).then(res => {
        this.$toast.clear();
        if(res.isOk){
          this.dataList = res.data;
          this.loading = false;
          // if (res.data.length == 0) {
          //   this.finished = true;
          // }else{
          //   this.finished = false;
          // }
        }else{
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.loading = false;
        // this.finished = true;
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      // this.finished = false;
      this.dataList = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true;
      this.querySugProd();
    },
    // getNewsList(){
    //   let param = {
    //     "offset":(this.page-1)*this.pageSize,
    //     "limit":this.pageSize,
    //   };
    //   // if (this.refreshing) {
    //   //     this.dataList = [];
    //   //     this.refreshing = false;
    //   // }
    //   this.baseService.postForm(this.__ctx + "/oa/oANotify/queryCustomerNotify",param).then(result => {
    //     this.dataList = this.dataList.concat(result.rows);
    //     this.pageData.total=result.total;
    //     this.loading = false;
    //     if (result.rows.length == 0) {
    //       this.finished = true;
    //     }else{
    //       this.finished = false;
    //     }
    //   }, function (status) {
    //     this.loading = false;
    //     this.finished = true;
    //     if (status == !0) {
    //       this.$Message.error('加载失败！' + status);
    //     }
    //   });
    // },
    // onRefresh() {
    //   // 清空列表数据
    //   this.finished = false;

    //   // 重新加载数据
    //   // 将 loading 设置为 true，表示处于加载状态
    //   this.loading = true;
    //   this.getNewsList();
    // },
    // onLoad() {
    //   if(this.refreshing){
    //     this.dataList = [];
    //     this.page = 1;
    //     this.refreshing = false;
    //   }else{
    //     this.page = this.page + 1;
    //   }
    //   this.getNewsList();
    // },
  },
};
</script>

<style scoped lang="less">
/deep/.van-nav-bar{
  .van-nav-bar__content{
    height: 4.4rem;
    line-height: 2rem;
    .van-icon{
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }
    .van-nav-bar__title{
      font-size: 1.8rem;
    }
  }
}
[class*=van-hairline]::after{
  border: 0;
}
.newHome-box {
  .product_main {
    
    .product_bg{
      // width: 100%;
      padding: 1.2rem 1.2rem 0;
      overflow-y: auto;
      height: calc(~'100vh - 5.6rem');

      .product_item {
        display: flex;
        background: #fff;
        color: rgb(29, 33, 41);
        font-size: 1.6rem;
        margin-bottom: 1.2rem;
        border-radius: 1rem;
        padding: 1.2rem;

        .product_item_left {
          display: flex;
          align-items: center;
          width: 97%;
          .product_price{
            min-width: 31%;
            text-align: center;
            position: relative;
            padding-right: 2.6rem;
            .pro-price{
              font-size: 2.6rem;
              color: var(--primary-color);
              span{
                font-size: 1.4rem;
              }
            }
            .pro-title{
              font-size: 1.2rem;
              color: rgb(134, 144, 156);
            }
            .border-right {
              width: 0.6px;
              height: 3.7rem;
              margin: 0;
              background: #f2f2f2;
              position: absolute;
              right: 1.6rem;
              top: 50%;
              margin-top: -1.9rem;
            }
          }
          .product_item_item {
            width: 65%;
            display: flex;
            flex-direction: column;
            flex: 1;
            // line-height: 0.25rem;
            // padding-top: 0.14rem;
            font-size: 1.4rem;
            color: rgba(29, 33, 41, 0.54);
            div{
              width: 93%;
              margin-bottom: 0.3rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .title{
              font-size: 1.6rem;
              font-weight: 700;
              line-height: 2rem;
              color: rgb(29, 33, 41);
              margin-bottom: 1.2rem;
              width: 93%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .pro-arrow{
          display:flex;
          align-items: center;
          /deep/.van-icon:before{
            width:0.84rem;
            color: rgb(201, 205, 212);
          }
        }
      }
    }
  }
}
</style>
